<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="keywords" content="传智健康">
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <!--<link rel="stylesheet" href="../../../static/plugins/elementui/index.css">-->
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="../../../static/plugins/font-awesome/css/font-awesome.min.css">

    <link rel="stylesheet" href="../../../static/css/orderset.css">
</head>
<body>
<div id="app">
    <div class="calendar">
        <!-- 年份 月份 -->
        <div class="month">
            <div class="currentdate">
                <span class="choose-year">{{ currentYear }}年</span>
                <span class="choose-month">{{ currentMonth }}月</span>
            </div>
            <div class="choose">
                <span @click="goCurrentMonth(currentYear,currentMonth)" class="gotoday">今天</span>
                <span @click="pickPre(currentYear,currentMonth)">❮</span>
                <span @click="pickNext(currentYear,currentMonth)">❯</span>
            </div>
            <div class="clearfix"></div>
        </div>
        <!-- 星期 -->
        <div class="caldate">
            <ul class="weekdays">
                <li>周一</li>
                <li>周二</li>
                <li>周三</li>
                <li>周四</li>
                <li>周五</li>
                <li>周六</li>
                <li>周日</li>
            </ul>
            <!-- 日期 -->
            <ul class="days">
                <!-- v-for循环 每一次循环用<li>标签创建一天 -->
                <li v-for="dayobject in days">
                    <h2>{{dayobject.year}}</h2>
                    <template>
                        <!-- 非当前月份 -->
                        <div class="other-month" v-if="dayobject.day.getMonth()+1 != currentMonth">
                            {{ dayobject.day.getDate() }}
                        </div>
                        <!-- 当前月 -->
                        <div class="everyday" v-if="dayobject.day.getMonth()+1 == currentMonth">
                            <span class="datenumber">{{ dayobject.day.getDate()}}</span>

                            <template>
                                <template v-for="obj in leftobj">

                                    <template v-if="obj.date == dayobject.day.getDate()">
                                        <template v-if="obj.number > obj.reservations">
                                            <div class="usual">
                                                <p>可预约{{obj.number}}人</p>
                                                <p>已预约{{obj.reservations}}人</p>
                                            </div>
                                        </template>
                                        <template v-else>
                                            <div class="fulled">
                                                <p>可预约{{obj.number}}人</p>
                                                <p>已预约{{obj.reservations}}人</p>
                                                <p>已满</p>
                                            </div>
                                        </template>
                                    </template>
                                </template>
                                <button v-if="dayobject.day > today" @click="open(dayobject.day)" class="orderbtn">
                                    设置
                                </button>
                                <el-dialog title="预约设置" :visible.sync="dialogFormVisible">
                                    <el-form :model="form">
                                        <el-form-item label="预约人数" :label-width="formLabelWidth">
                                            <el-input v-model="form.number" oninput="value=value.replace(/[^\d]/g,'')"
                                                      autocomplete="off" placeholder="不能低于当前日期预约的总数"></el-input>
                                        </el-form-item>
                                    </el-form>
                                    <div slot="footer" class="dialog-footer">
                                        <el-button @click="dialogFormVisible = false">取 消</el-button>
                                        <el-button type="primary" @click="addOrderSetting(form,dayobject.day)">确 定
                                        </el-button>
                                    </div>
                                </el-dialog>
                            </template>

                        </div>
                    </template>
                </li>
            </ul>
        </div>
    </div>


</div>
</body>

<script src="../../../static/js/axios-0.18.0.js"></script>
<script src="../../../static/js/vue.js"></script>
<!-- 引入组件库 -->

<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script type="text/javascript" src="../../../static/js/jquery.min.js"></script>
<script>
    var vue = new Vue({
        el: "#app",
        data: {
            value: '',
            listData: [],
            today: new Date(),//当前日期
            currentDay: 1,
            currentMonth: 1,
            LocalMonth: 1,
            currentYear: 1970,
            currentWeek: 1,
            days: [],
            leftobj: [],//用于装载页面显示的月份已经进行预约设置的数据,
            date:''
        },
        data() {
            return {
                value: new Date(),
                dialogTableVisible: false,
                dialogFormVisible: false,
                listData: [],
                form: {
                    number: '',
                },
                formLabelWidth: '120px', today: new Date(),//当前日期
                currentDay: 1,
                currentMonth: 1,
                LocalMonth: 1,
                currentYear: 1970,
                currentWeek: 1,
                days: [],
                leftobj: []//用于装载页面显示的月份已经进行预约设置的数据
            }
        }, methods: {
            getDataByMonth() {
                axios.get("/orderSetting/queryAllOrderSetting",{
                    params:{
                        date:this.currentYear + "-" + this.currentMonth
                    }
                })
                    .then(res => {
                  if (res.data=='flag'){
                      this.$message({
                          showClose: true,
                          message: '未知错误!',
                          type: 'error'
                      });
                  }else if (res.data.code=="-998"){
                      this.$message({
                          showClose: true,
                          message: '你无该权限!',
                          type: 'error'
                      });
                  }else if (res.data.code==null||res.data.code==''){
                      this.leftobj=res.data;
                      console.log("data:"+this.leftobj)
                  }

                })
            }
            , addOrderSetting(form, date) {
                console.log(this.value)
                console.log(this.listData)
                if (form.number == null || form.number == '') {
                    this.$message({
                        showClose: true,
                        message: '值不能为空!',
                        type: 'error'
                    });
                    return;
                }
                axios.post("/orderSetting/addOrderSetting", {
                    'orderDate': this.date,
                    'number': form.number
                }).then(data => {
                    if (data.data.code == '-998') {
                        this.$message({
                            showClose: true,
                            message: '你无该权限!',
                            type: 'error'
                        });
                    } else if (data.data == true || data.data == 'true') {
                        this.$message({
                            showClose: true,
                            message: '设置成功!',
                            type: 'success'
                        });
                    } else if (data.data == 'flag') {
                        this.$message({
                            showClose: true,
                            message: '你设置的值不能小于一天预约的总数!',
                            type: 'error'
                        });
                    } else {
                        this.$message({
                            showClose: true,
                            message: '设置失败!',
                            type: 'error'
                        });
                    }
                    this.getDataByMonth();
                    this.dialogFormVisible = false;
                }).catch(e => {
                    alert("错误信息为:" + e)
                });

            }, queryAllOrderSetting() {
                axios.get("/orderSetting/queryAllOrderSetting").then(data => {
                    this.listData = data.data;
                    console.log(this.days)
                }).catch(e => {
                    alert("错误信息为:" + e)
                });
            }, initData: function (cur) {
                var date;
                var index = 0;   //控制显示预定的天数
                if (cur) {
                    date = new Date(cur);
                } else {
                    var now = new Date();
                    var d = new Date(this.formatDate(now.getFullYear(), now.getMonth(), 1));
                    d.setDate(35);
                    date = new Date(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1));
                }
                this.currentDay = date.getDate();
                this.currentYear = date.getFullYear();
                this.currentMonth = date.getMonth() + 1;
                this.currentWeek = date.getDay(); // //本月第一天是周几（周日0 周六 6）
                var today = new Date();
                this.LocalMonth = today.getMonth() + 1;
                if (this.currentWeek == 0) {
                    this.currentWeek = 7;
                }
                var str = this.formatDate(this.currentYear, this.currentMonth, this.currentDay);
                this.days.length = 0;
                // 今天是周日，放在第一行第7个位置，前面6个
                //初始化本周
                for (var i = this.currentWeek - 1; i >= 0; i--) {
                    var d = new Date(str);
                    d.setDate(d.getDate() - i);
                    var dayobject = {};
                    dayobject.day = d;
                    var now = new Date();
                    if (d.getDate() === (now.getDate()) && d.getMonth() === now.getMonth() && d.getFullYear() === now.getFullYear()) {
                        dayobject.index = index++;//从今天开始显示供预定的数量
                    } else if (index != 0 && index < 3)
                        dayobject.index = index++;//从今天开始3天内显示供预定的数量
                    this.days.push(dayobject);//将日期放入data 中的days数组 供页面渲染使用
                }
                //var temp = 35;
                //if(this.currentWeek>=6){
                //    temp = 42;
                //}
                //其他周
                //for (var i = 1; i <= temp - this.currentWeek; i++) {
                //其他周
                for (var i = 1; i <= 35 - this.currentWeek; i++) {
                    var d = new Date(str);
                    d.setDate(d.getDate() + i);
                    var dayobject = {};//dayobject   {day:date,index:2}
                    dayobject.day = d;
                    var now = new Date();
                    if (d.getDate() === (now.getDate()) && d.getMonth() === now.getMonth() && d.getFullYear() === now.getFullYear()) {
                        dayobject.index = index++;
                    } else if (index != 0 && index < 3)
                        dayobject.index = index++;
                    this.days.push(dayobject);
                }

                /*this.leftobj = [
                    { date: 1, number: 120, reservations: 1 },
                    { date: 3, number: 120, reservations: 1 },
                    { date: 4, number: 120, reservations: 120 },
                    { date: 6, number: 120, reservations: 1 },
                    { date: 8, number: 120, reservations: 1 }
                ];*/
            },
            //切换到当前月份
            goCurrentMonth: function (year, month) {
                var d = new Date();
                this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1));
                this.getDataByMonth();
            },
            //向前一个月
            pickPre: function (year, month) {
                // setDate(0); 上月最后一天
                // setDate(-1); 上月倒数第二天
                // setDate(dx) 参数dx为 上月最后一天的前后dx天
                var d = new Date(this.formatDate(year, month, 1));
                d.setDate(0);
                this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1));
                this.getDataByMonth();
            },
            //向后一个月
            pickNext: function (year, month) {
                var d = new Date(this.formatDate(year, month, 1));
                d.setDate(35);////获取指定天之后的日期
                this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1));
                this.getDataByMonth();
            },
            // 返回 类似 2016-01-02 格式的字符串
            formatDate: function (year, month, day) {
                var y = year;
                var m = month;
                if (m < 10) m = "0" + m;
                var d = day;
                if (d < 10) d = "0" + d;
                return y + "-" + m + "-" + d
            }, initialization() {
                this.initData(null);
            },open(date){
                this.date=date;
                this.dialogFormVisible=true;
            }
        }, created() {
         //   this.queryAllOrderSetting();
            this.initialization();
            this.getDataByMonth();
        }
    })
</script>
</html>